<template>
  <div>
    <el-container>
      <el-aside width="750px">
        <el-radio name="func" border v-model="drawModel" label="polygon">绘制多边形</el-radio>
        <div id="container" style="width:100%;height:530px"/>
      </el-aside>
      <el-main>
        <el-table :data="courierData">
          <el-table-column label="用户">
            <template slot-scope="scope">
              <el-select v-model="scope.row.userId" disabled>
                <el-option v-for="(item,index) in userAllData" :key="index" :label="item.name" :value="item.id"/>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="行政" width="200">
            <template slot-scope="scope">
              <el-select v-model="scope.row.areaId" disabled>
                <el-option v-for="(item,index) in coreOrgAllData" :key="index" :label="item.name" :value="item.id"/>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" @click="queryCourierScope(scope.row)">查看作业范围</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import coreOrg from '@/api/base/coreOrg/index'
import user from '@/api/base/globalUser/index'
import AMap from 'AMap'

export default {
  name: 'index',
  data() {
    return {
      //根据id获取数据
      coreOrgData: {},
      //机构工作范围
      coreOrgScope: {},
      courierData: [],
      courierWorkScopeData: {},
      //高德地图map
      map: null,
      mouseTool: null,
      overlays: [],
      radios: null,
      marker: null,
      path: [],
      //快递员作业范围
      courierPath: [],
      //多边形对象
      polygon: null,
      overlayGroup: null,
      drawModel: '',
      courierPolygon: null,
      userAllData: [],
      coreOrgAllData: []
    }
  }, methods: {
    getUserAllData() {
      user.queryAll().then(data => {
        this.userAllData = data.data
      })
    },
    getCoreOrgALlData() {
      coreOrg.queryAll().then(data => {
        this.coreOrgAllData = data.data
      })
    },
    //查看作业范围
    queryCourierScope(row) {
      this.getCoreOrgScopeById(row.areaId, row.userId)
    },
    /**
     * 在高德地图上查找对应的范围
     */
    getCoreOrgScopeById(id, userId) {
      coreOrg.findAllAgencyScope(id).then(data => {
        this.coreOrgScope = data.data[0]
        coreOrg.findById(id).then(data => {
          this.coreOrgData = data.data;

          this.$nextTick(() => {
            /**
             * 显示地图
             */
            this.showAmap()
            /**
             *机构作业范围
             */
            let coreOrgScope = this.coreOrgScope.mutiPoints
            for (let i = 0; i < coreOrgScope.length; i++) {
              let lng = coreOrgScope[i].lng
              let lat = coreOrgScope[i].lat
              let a = [lng, lat]
              this.path.push(a)
            }
            this.polygon = new AMap.Polygon({
              path: this.path,
              strokeColor: '#FF33FF', //线颜色
              strokeOpacity: 0.2, //线透明度
              strokeWeight: 3,    //线宽
              fillColor: '#1791fc', //填充色
              fillOpacity: 0.35//填充透明度
            })
            this.polygon.setMap(this.map)

            /**
             * 快递员的作业范围
             */
            this.$nextTick(() => {
              coreOrg.findAllCourierScope(userId).then(data => {
                this.courierWorkScopeData = data.data[0]
                let mutiPoints = this.courierWorkScopeData.mutiPoints
                for (let i = 0; i < mutiPoints.length; i++) {
                  let lng = mutiPoints[i].lng
                  let lat = mutiPoints[i].lat
                  let a = [lng, lat]
                  this.courierPath.push(a)
                }
                this.courierPolygon = new AMap.Polygon({
                  path: this.courierPath,
                  strokeColor: '#FF0000', //线颜色
                  strokeOpacity: 0.2, //线透明度
                  strokeWeight: 3,    //线宽
                  fillColor: '#FF0000', //填充色
                  fillOpacity: 0.35//填充透明度
                })
                this.courierPolygon.setMap(this.map)
              })
            })
          })
        })

      })
    },
    /**
     * 显示数据
     */
    queryCourierData(id) {
      coreOrg.findAllCourierScope(id).then(data => {
        this.courierData = data.data
      })
    },
    /**
     *显示地图
     * */
    showAmap() {
      this.map=null;
      this.map = new AMap.Map('container', {
        zoom: 11, // 级别
        resizeEnable: true,
        center: [Number(this.coreOrgData.longitude), Number(this.coreOrgData.latitude)]
      })

      this.marker = new AMap.Marker({
        position: new AMap.LngLat(Number(this.coreOrgData.longitude), Number(this.coreOrgData.latitude)),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: this.coreOrgData.name
      })
      this.map.add(this.marker)
      //工具
      this.mouseTool = new AMap.MouseTool(this.map)

    }
  }, mounted() {
    this.queryCourierData();
    this.getUserAllData();
    this.getCoreOrgALlData();
  }
}
</script>

<style scoped>

</style>
